<template>
  <div style="margin: 10px 0">
    <div class="header">
      <el-form :model="query" ref="queryFrom" :inline="true" size="mini">
        <el-form-item label="图片类别" prop="category">
          <el-select
            v-model="query.category"
            placeholder="请选择图片类别"
            style="width: 230px"
            size="mini"
            filterable
            :loading-text="options.category.loadingText"
            :loading="options.category.loading"
            @change="getPictureList"
            @focus="getCategoryOptions"
          >
            <el-option
              v-for="item in options.category.data"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-button type="success" size="mini" @click="dialogVisible = true" icon="el-icon-upload2">点击上传图片</el-button>
      </el-form>

      <el-dialog
        title="图片上传"
        :visible.sync="dialogVisible"
        width="30%">

        <upload></upload>

        <el-input
          placeholder="请输入图片类型 例如: 炒锅 , 平底锅"
          v-model="query.category"
          type="text"
          prefix-icon="el-icon-s-grid"
          clearable>
        </el-input>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        </span>
      </el-dialog>
    </div>
    <div class="main">
      <div class="images">
        <div v-for="(item, index) in table.data" :key="index" class="image-middle">
          <el-card shadow="hover" :body-style="{ padding: '10px' }">
            <el-popover>
              <el-image :src="table.data[index].imagePath" slot="reference" class="image"/>
              <el-image :src="table.data[index].imagePath"/>
            </el-popover>
          </el-card>
        </div>
      </div>
    </div>

    <div class="footer" v-if="table.data.length > 0">
      <el-pagination
        background
        layout="sizes,prev, pager, next, jumper, ->, total"
        :total="table.total"
        :page-sizes="[30, 50, 100, 300]"
        :page-size="table.pageSize"
        :current-page="table.pageNo"
        :page-count="table.pages"
        @size-change="table.handleSizeChange"
        @current-change="table.handleCurrentChange"
      >
      </el-pagination>
    </div>

  </div>
</template>
<script>

import { getCategory, page } from "@/views/product/productImage/api";
import Upload from "@/components/utils/Upload.vue";
import FilterTemplate from "@/views/product/competitor/filtrTemplate.vue";

export default {
  name: "index",
  components: { FilterTemplate, Upload },
  computed: {
    isTableShow() {
      return this.table.data.length > 0;
    }
  },
  created() {},
  mounted() {},
  data() {
    let _vm = this;
    return {
      imgArr: [],
      table: {
        tbLoading: false,
        /* 选中行数据 */
        sRows: [],
        data: [],
        pageNo: 1,
        pages: 0,
        pageSize: 30,
        pageCount: 0,
        sortField: "",
        sortMode: void 0,
        handleSizeChange(pageSize) {
          if (pageSize === _vm.table.pageSize) {
            return;
          }
          _vm.table.pageSize = pageSize;
          _vm.getPictureList();
        },
        handleCurrentChange(pageNo) {
          if (pageNo === _vm.table.pageNo) {
            return;
          }
          _vm.table.pageNo = pageNo;
          _vm.getPictureList();
        },
        sRowChange(rows) {
          _vm.table.sRows = rows;
        }
      },
      query: {
        category: ""
      },
      options: {
        category: {
          loading: true,
          loadingText: "获取选项中...",
          data: []
        }
      },
      dialogVisible: false,
    }
  },
  methods: {
    getCategoryOptions() {
      this.options.category.loading = true;
      getCategory().then((res) => {
        this.options.category.data = res;
      }).finally(() => {
        this.options.category.loading = false;
      });
    },
    getPictureList() {
      this.table.loading = true;
      let params = {
        pageNo: this.table.pageNo,
        pageSize: this.table.pageSize,
        category: this.query.category
      }
      page(params).then(res => {
        this.table.data = res.list
        this.table.pageNo = res.pageNo
        this.table.pageCount = res.total
        this.table.pageSize = res.pageSize
        this.table.pages = res.pages
      }).finally(() => {
        this.table.loading = false;
      });
    },
  },
}
</script>
<style scoped>
.header{

}
.main{
  height: 720px;
  margin: 0 0;
}
.footer{
  display: flex;
  justify-content: space-between;
}
/* “Tissue Search”字体样式 */
.position {
  margin-left: 15px;
  font-size: 30px;
  font-weight: 600;
}
/* 图片总布局，样式 */
.images{
  display: flex;
  flex-wrap: wrap;
}
/* 图片之间 */
.image-middle{
  margin-right: 5px;
  margin-bottom: 5px;
}
/* 单张图片样式 */
.image{
  width: 85px;
  height: 85px;
}

</style>